<template>
	<view class="box">
		<view>
			<drawer :show="isDrawerOpen" @close="closeDrawer"></drawer>
		</view>
		<view>
			<languageMask :show="isOpenMask" @close="closeMask" @languageChanged="refreshLanguage"></languageMask>
		</view>
		<view class="head">
			<view style="display: flex;align-items: center;">
				<image src="../../static/qukuailian2_slices/danlieliebiao.png" class="list" @click="openDrawer"></image>
				<image src="../../static/caifubeifen_slices/lujing9.png" mode="" class="back" @click="toBack"></image>
			</view>
			<view class="head-title">
				<view class="vtitle">{{$data.$language.qvtitle}}</view>
			</view>
			<view class="right-head">
				<image src="../../static/qianbaobeifen2_slices/diqiugenghuan.png" mode="" class="language" @click="openMask"></image>
			</view>
		</view>

		<view class="quotaList">
			<view class="title">
				<view class="title1">
					{{$data.$language.qtitle1}}
				</view>
				<view class="title2">
					{{$data.$language.qtitle2}}：{{TotalData.pay_wone}} USDT
				</view>
			</view>

			<view class="contain">
				<view class="top">
					<view class="left">
						<view class="test1">
							<image src="../../static/caifubeifen_slices/USDT.png" mode=""></image>
							<view>
								USDT
							</view>
						</view>
						<view class="test2">
							<!-- {{pay_wone}} -->
							<input v-if="inpustShow" type="number" v-model="pay_wone" @input="mongbun">
							<!-- <uni-number-box :min="0" :max="9" v-model="pay_wone"></uni-number-box> -->
						</view>
					</view>
					<view class="middle">
						<image src="../../static/peiebeifen_slices/duihuan (1).png" mode=""></image>
					</view>
					<view class="right">
						<view class="test1">
							<image src="../../static/caifubeifen_slices/bianzu2beifen.png" mode=""></image>
							<view>
								WONE
							</view>
						</view>
						<view class="test2">
							{{wozhis}}
						</view>
					</view>
				</view>
				<!-- <view class="line">
				</view>

				<view class="bottom">
					<view class="circle">
						<image src="../../static/jiedianhuiyuanbeifen_slices/bianzu.png" mode=""></image>
					</view>
					<view class="test">
						<view class="test1">
							<view class="wealth">
								{{$data.$language.qwealth}}
							</view>
							<view class="number">
								<view class="number1">
									+300.00
								</view>
								<view class="number2">
									USDT
								</view>
							</view>
						</view>

						<view class="test2">
							<view class="date">
								06/25 09:41
							</view>
							<view class="number">
								{{$data.$language.qtitle2}}：30.00 USDT
							</view>
						</view>
					</view>
				</view> -->
			</view>

			<view class="notice" v-if="langImg">
				{{notice}}
			</view>
			<view class="notice" v-else>
				{{notice_en}}
			</view>
		</view>
		<view class="monbtncer" v-if="bntshuminbtn">
			
		</view>
		<view class="monboxndmrj" v-if="bntshuminbtn">
			<view class="viewtitle">
				{{$data.$language.Passwordinput}}
			</view>
			<input type="password" :placeholder="$data.$language.Passwordinput" v-model="password" :maxlength='6'>
			<view class="btnmaninds">
				<view class="aatione" @click="cancellationbtn()">
					{{$data.$language.cancellation}}
				</view>
				<view class="" @click="quBtns">
					{{$data.$language.qbtn}}
				</view>
			</view>
		</view>
		<view class="btn" @click="getPayBtn">
			{{$data.$language.qbtn}}
		</view>
	</view>
</template>

<script>
	import drawer from "../../my-components/drawer/drawer.vue"
	import uninumberbox from "../../uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue"
	import languageMask from "../../my-components/languageMask/languageMask.vue"
	import { getPayWone,getPay } from '@/api/index.js';
	import zhCN from '@/locales/zh-CN.js'
	import enUS from '@/locales/en-US.js'
	import trCN from '@/locales/tr-CN.js'
	export default {
		data() {
			return {
				// $language:uni.getStorageSync('locale')=='en-US'? enUS:zhCN,
				langImg:uni.getStorageSync('locale')=='tr-CN',
				isDrawerOpen: false,
				isOpenMask: false,
				pay_wone:0,
				wone_usdt:'',
				wo:'',
				notice:'',
				notice_en:'',
				maxinput:0,
				inpustShow:true,
				TotalData:{},
				bntshuminbtn:false,
				password:'',
			}
		},
		computed: {
			wozhis: function() {
				// console.log('调用computed')
				// this.wo = parseFloat(this.pay_wone/this.wone_usdt).toFixed(2)
				return (parseInt(this.pay_wone/this.wone_usdt*100)/100).toFixed(2)
			},
		},
		onLoad() {
			var translate = uni.getStorageSync('locale')
			if(translate=='en-US'){
				this.$data.$language = enUS
			}else if(translate=='zh-CN'){
				this.$data.$language = zhCN
			}else{
				this.$data.$language = trCN
			}
			this.loadData()
		},
		methods: {
			cancellationbtn(){
				this.bntshuminbtn = false
			},
			mongbun(value){
				var k = parseFloat(this.pay_wone)
				var j = parseFloat(this.maxinput)
				// console.log( k)
				// console.log( j)
				if(parseFloat(this.pay_wone)>parseFloat(this.maxinput)){
					var that = this
					that.inpustShow = false
					that.pay_wone = that.maxinput
					setTimeout(function(){
						that.inpustShow = true
						// console.log(that.pay_wone)
					},100)
				}
			},
			refreshLanguage(locale) {
			      if (locale === 'zh-CN') {
			        this.$language = zhCN
			      } else if (locale === 'en-US') {
			        this.$language = enUS
			      }else{
					  this.$language = trCN
				  }
				  uni.reLaunch({
				    url: '/pages/quota/quota' // 当前页面的lujing
				  });
				  
			},
			toBack() {
				uni.navigateBack()
			},
			openDrawer() {
				this.isDrawerOpen = true
			},
			closeDrawer() {
				this.isDrawerOpen = false
			},
			openMask() {
				this.isOpenMask = true
			},
			closeMask() {
				this.isOpenMask = false; // 遮罩层guanbi事件处理
			},
			loadData() {
				getPay(
			        (data) => {
			          // 处理成功返回的数据	
					  this.TotalData = data
					  this.wone_usdt = data.wone_usdt
					  this.pay_wone = data.pay_wone
					  this.maxinput = data.pay_wone
					  this.wo = parseFloat(data.pay_wone/data.wone_usdt).toFixed(2)
					  this.notice = data.notice
					  this.notice_en = data.notice_en
			        },
			        (errorMsg) => {
			          // 处理请求失败或错误的情况
			          console.error(errorMsg);
			        }
			    );
			},
			quBtns(){
				this.bntshuminbtn = false
				getPayWone({
					usdt:this.pay_wone,
					password:this.password,
				},
				    (data) => {
						// console.log(data,'数据')
				      // 处理成功返回的数据
					  // this.count_usdt = data.count_usdt
					  // this.freeze_wone = data.freeze_wone
					  // this.freeze_woo = data.freeze_woo
					  // this.code = data.url
					  // this.usdt = data.usdt
					  // this.wone = data.wone
					  uni.showToast({
					  	title:data.msg,
					  	icon:'none',
					  	duration:2000
					  })
					  setTimeout(()=>{
					  	uni.reLaunch({
					  		url:'/pages/details/details'
					  	})
					  },2000);
					  // this.loadData()
				    },
				    (errorMsg) => {
				      // 处理请求失败或错误的情况
				      console.error(errorMsg);
					  var mimacuowu = this.$data.$language.mimacuowu
					  uni.showToast({
					  	title:mimacuowu,
					  	icon:"none",
					  	duration:2000
					  })
				    }
				);
			},
			getPayBtn(){
				if(this.wone<=0){
					var omnbenrb = this.$data.$language.omnbenrb
					uni.showToast({
						title:omnbenrb,
						icon:"none",
						duration:2000
					})
				}else{
					this.bntshuminbtn = true
				}
				
			}
		},
		components: {
			drawer,
			languageMask
		}
	}
</script>

<style lang="less">
	.box {
		width: 750rpx;
		background: #FFFFFF;
	}

	.head {
		padding: 40rpx;
	}
.monbtncer{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0, .4);
		z-index: 999;
	}
	.monboxndmrj{
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		z-index: 9999;
		width: 600rpx;
		height: 400rpx;
		background-color: #fff;
		border-radius: 14rpx;
		.viewtitle{
			width: 100%;
			font-size: 34rpx;
			height: 120rpx;
			text-align: center;
			line-height: 120rpx;
			color: #000000;
		}
		input{
			width: 80%;
			height: 80rpx;
			border: 1rpx solid #e9e9e9;
			padding: 0 24rpx;
			box-sizing: border-box;
			border-radius: 14rpx;
			display: block;
			margin: auto;
		}
		.btnmaninds{
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: space-around;
			margin-top: 60rpx;
			view{
				width: 200rpx;
				text-align: center;
				line-height: 100rpx;
				font-size: 30rpx;
				background: #0762FF;
				border-radius: 6px;
				color: #fff;
			}
			.aatione{
				background-color: #e9e9e9;
				color: #000000;
			}
		}
	}
	.title {
		width: 164rpx;
		height: 48rpx;
		font-size: 34rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #000000;
		line-height: 48rpx;
		margin-left: 160rpx;
		text-align: center;
		align-self: flex-end;
	}

	.quotaList {
		height: 664rpx;
	}

	.quotaList .title {
		width: 100%;
		height: 44rpx;
		display: flex;
		margin-left: 24rpx;
	}

	.quotaList .title1 {
		width: 282rpx;
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #2C2C2C;
		line-height: 44rpx;
		text-align: left;
	}

	.quotaList .title2 {
		width: 354rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #959AA7;
		line-height: 34rpx;
		margin-left: 34rpx;
		text-align: right;
	}

	.contain {
		width: 702rpx;
		/* height: 500rpx; */
		background: #F4F6FA;
		border-radius: 16rpx;
		margin: 14rpx 0 0 24rpx;
	}

	.contain .top {
		height: 288rpx;
		display: flex;
	}

	.contain .line {
		width: 638rpx;
		height: 2rpx;
		border-top: 1rpx solid #BABEC8;
		margin-left: 32rpx;
	}

	.contain .bottom {
		height: 140rpx;
		width: 638rpx;
		margin: 30rpx 0 0 32rpx;
		border-radius: 16rpx;
		background: #FFFFFF;
		overflow: hidden;
		display: flex;
	}

	.top .left {
		width: 260rpx;
		height: 100%;
	}

	.top .middle {
		width: 76rpx;
		height: 100%;
		margin-left: 54rpx;
	}

	.top .right {
		width: 162rpx;
		height: 100%;
		margin-left: 104rpx;
	}

	.top .test1 {
		display: flex;
	}

	.top .test1 image {
		height: 60rpx;
		width: 60rpx;
		margin: 80rpx 0 0 32rpx;
	}

	.top .test1 view {
		width: 108rpx;
		height: 34rpx;
		font-size: 32rpx;
		font-family: Arial-BoldMT, Arial;
		font-weight: normal;
		color: #2C2C2C;
		line-height: 36rpx;
		margin: 94rpx 0 0 14rpx;
	}

	.top .test2 {
		width: 228rpx;
		height: 44rpx;
		font-size: 40rpx;
		font-family: Arial-BoldMT, Arial;
		font-weight: normal;
		color: #2C2C2C;
		line-height: 46rpx;
		margin: 36rpx 0 0 32rpx;

	}
	.top .test2 input{
		font-size: 40rpx;
		font-family: Arial-BoldMT, Arial;
		font-weight: normal;
		color: #2C2C2C;
		border: 1rpx solid #e9e9e9;
		border-radius: 14rpx;
		text-align: center;
	}

	.middle image {
		height: 76rpx;
		width: 76rpx;
		margin-top: 112rpx;
	}

	.right .test1 image {
		width: 60rpx;
		height: 62rpx;
		margin-left: 0;
	}

	.right .test2 {
		margin-left: 0;
	}

	.bottom .circle {
		width: 34rpx;
		height: 38rpx;
		margin: 50rpx 0 0 30rpx;
	}

	.bottom .circle image {
		width: 34rpx;
		height: 38rpx;
	}

	.bottom .test {
		width: 532rpx;
		height: 76rpx;
		margin: 34rpx 0 0 16rpx;
	}

	.test .test1 {
		display: flex;
		justify-content: space-between;
	}

	.test .test2 {
		display: flex;
	}

	.test .test1 .wealth {
		width: 128rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #2C2C2C;
		line-height: 40rpx;
	}

	.test .test1 .number {
		display: flex;
		margin-left: 230rpx;
		width: 206rpx;
		height: 34rpx;
		justify-content: space-between;
	}

	.test .test1 .number .number1 {
		font-size: 32rpx;
		font-family: Arial-BoldMT;
		font-weight: BoldMT;
		color: #2C2C2C;
		line-height: 36rpx;
	}

	.test .test1 .number .number2 {
		font-size: 24rpx;
		font-family: Arial;
		color: #2C2C2C;
		line-height: 36rpx;
	}

	.test .test2 .date {
		width: 188rpx;
		height: 28rpx;
		font-size: 24rpx;
		font-family: ArialMT;
		color: #939393;
		line-height: 28rpx;
		margin-top: 8rpx;
	}

	.test .test2 .number {
		width: 296rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #959AA7;
		line-height: 34rpx;
		margin-left: 48rpx;
		text-align: right;
	}

	.notice {
		width: 702rpx;
		height: 86rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #939393;
		line-height: 34rpx;
		margin: 20rpx 0 0 24rpx;
	}

	.btn {
		width: 702rpx;
		height: 80rpx;
		background: #0762FF;
		border-radius: 12rpx;
		margin-left: 24rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		position: fixed;
		left: 0;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>